<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>打卡签到</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css?v=20211224" rel="stylesheet">
</head>

<style type="text/css">

    .van-circle__text {
        font-size: 17px;
        font-weight: bold;
    }

    .sign_success {
        margin-left: 30%;
        font-size: 20px;
        font-weight: bold;
        margin-top: 20px;
    }

    .point_font {
        color: #6bb939;
    }

</style>

<body>
<div id="app" v-cloak>
    <div @click="signIn" style="width: 100%;">
        <van-circle
                :fill=fillColor
                :rate="rate"
                :speed="300"
                :stroke-width="100"
                size="150px"
                style="margin-left: 30%;margin-top: 50px"
                text="点击签到"
                v-model="currentRate"
        >
            <img alt="" src="../../public/image/icon/success.png"
                 style="position: absolute; top: 50%;  left: 50%;  transform: translate(-50%, -50%);"
                 v-if="currentRate===100 || isSignIn"/>
        </van-circle>
        <div class="sign_success" v-if="currentRate===100 || isSignIn">
            {{successTxt}}
            <span class="point_font">{{pointTxt}}</span>
        </div>
    </div>

    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=202123052214" type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            rate: 0,
            currentRate: 0,
            point: 20,
            fillColor: '#3193F2',
            pointTxt: '',
            successTxt: '',
            signImg: '',
            memberId: '',
            memberInfo: {},
            signInParam: {},
            isSignIn: false
        },
        mounted: function () {
            let self = this;
            self.memberId = getCookie(COOKIE_MEMBER_ID);
            if (!self.memberId) {
                MemberUtils.getMemberInfo().then(function (res) {
                    console.log("会员基础信息");
                    console.log(res);
                    if (res && res.code === 200) {
                        setCookie(COOKIE_MEMBER_ID, res.data.id, 30);
                        self.memberInfo = res.data;
                        self.memberId = res.data.id;
                        self.getSignInData();
                    }
                })
            } else {
                console.log("cookie读取会员ID");
                self.getSignInData();
            }
        },
        methods: {
            signIn: function () {
                let self = this;
                if (self.isSignIn) {
                    $.toptip('今天已经签到了哟！', 'error');
                    return false;
                }
                self.signInParam = {
                    "memberId": self.memberId,
                    "addPoint": self.point,
                    "signInDate": new Date()
                }
                MemberUtils.signIn(self.signInParam).then(function (res) {
                    if (res && res.code === 200) {
                        self.rate = 100;
                        $.toptip(res.msg || '签到成功', 'success');
                    }
                })
            },
            getSignInData: function () {
                let self = this;
                MemberUtils.getSignInData(self.memberId).then(function (res) {
                    if (res && res.code !== 200) {
                        self.rate = 100;
                        self.isSignIn = true;
                    }
                })
            }
        },
        watch: {
            currentRate: {
                handler(newVal, oldVal) {
                    if (newVal === 100) {
                        this.fillColor = '#1cdb1c';
                        this.successTxt = '签到成功+';
                        this.pointTxt = this.point + '积分';
                    }
                }
            }
        }
    })
</script>
</body>
</html>
